/**
 * 数据源选择器组件
 */
import React from 'react';
import { Form, Select, Space } from 'antd';
import { DatabaseOutlined } from '@ant-design/icons';

interface DataSourceItem {
  id: number;
  name: string;
  type: string;
}

interface DataSourceSelectorProps {
  dataSources: DataSourceItem[];
  selectedDataSource?: DataSourceItem | null;
  onDataSourceChange: (dataSourceId: number) => void;
  onDataSourceClear: () => void;
  loading?: boolean;
  label?: string;
  placeholder?: string;
  required?: boolean;
}

const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({
  dataSources,
  selectedDataSource,
  onDataSourceChange,
  onDataSourceClear,
  loading = false,
  label = "数据源（用于变量）",
  placeholder = "选择数据源以获取可用变量",
  required = false,
}) => {
  return (
    <Form.Item 
      label={label}
      rules={required ? [{ required: true, message: '请选择数据源' }] : undefined}
    >
      <Select
        placeholder={placeholder}
        value={selectedDataSource?.id}
        onChange={onDataSourceChange}
        allowClear
        onClear={onDataSourceClear}
        loading={loading}
        style={{ width: '100%' }}
      >
        {dataSources.map(ds => (
          <Select.Option key={ds.id} value={ds.id}>
            <Space>
              <DatabaseOutlined />
              {ds.name} ({ds.type})
            </Space>
          </Select.Option>
        ))}
      </Select>
    </Form.Item>
  );
};

export default DataSourceSelector;
